<template>
	<div>
		<div class="enger_item" v-for="(item, index) in CheckPassEnger" :key="index">
			<div class="delete" @click="deleteTicketPassEnger(item)"></div>
			<div class="enger_txt">
				<div>
					<span class="grey">姓名</span>
					<span>{{ item.name }}</span>
				</div>
				<div>
					<span class="grey">身份证</span>
					<span class="green">{{ formatIdcard(item.id_card) }}</span>
				</div>
			</div>
		</div>
		<van-popup class="addPop" v-model="show" position="bottom"  @close="selectFinish" @closed="showBar">
			<div class="popwrap">
				<van-loading color="#1989fa" type="spinner"  class="passengerLoad" v-show="loading" />
				<van-empty image="search" image-size="100" description="暂无乘客去添加"  class="nopassEnger" v-show="!hasPassEnger"/>
				<div @click="timeOutreGet">
					<van-empty
						image="network" 
						image-size="100" 
						description="网络超时请点击重试"  
						class="nopassEnger" 
						v-show="timeOut" 
					/>
				</div>
				<div class="poptitle">
					<div class="addPassenger" @click="addPassEnger">
						<span><img src="@/assets/images/searchBus/add.png"/></span>
						新增乘客
					</div>
					<div class="deletePassenger" @click="deletePassEnger" v-show="PassEnger.length">
						<span><img src="@/assets/images/searchBus/delete.png"/></span>
						删除乘客
					</div>
				</div>
				<div class="line"></div>
				<div class="selectBox">
					<div class="select_item">
						<!--  -->
						<van-checkbox-group v-model="CheckPassEnger">
							<van-cell-group>
								<van-cell
									v-for="(item, index) in PassEnger"
									clickable
									:key="index"
									:title="`${item.name}`"
									:label="formatIdcard(item.id_card)"
									title-class="vantit"
									label-class="vanlab"
									@click="toggle(index)"
								>
									<template #right-icon>
										<van-checkbox :name="item" ref="checkboxes" />
									</template>
								</van-cell>
							</van-cell-group>
						</van-checkbox-group>
						<!--  -->
					</div>
				</div>
			</div>
		</van-popup>
	</div>
</template>
<script>
import authMixin from '@/mixin/mixin'
export default {
	data() {
		return {
			loading:true,
			hasPassEnger: true, //没有乘客
			timeOut: false,
			show: false,
			PassEnger: [],
			CheckPassEnger: [],
			FullNumber:0,  //全价票人数
			HalfNumber:0,   //半价票人数
			Card_Ids:[1,2,3],
			
		};
	},
	mixins:[authMixin],
	created() {
		this.getPassEnger()
	},
	computed:{
	},
	methods: {
		formatIdcard(idcard){
			return idcard.substr(0,6) + '****' + idcard.substring(idcard.length-5)
		},
		timeOutreGet(){
			this.loading = true
			this.timeOut = false
			this.getPassEnger()
		},
		getPassEnger() {
			//乘客获取
			this.$request({
				method: 'post',
				url: '/idcard/index'
			}).then(res => {
				console.log(res)
				if(res.data && res.data.length){
					res.data.forEach(item => {
						let pushObj = `{
								 "id": "${item.id}",
								 "id_card": "${item.id_card}",
								 "mobile": "${item.mobile}",
								 "name": "${item.name}",
								 "sex": "${item.sex}",
								 "ticket_type": "${item.ticket_type}"
							}`;
						this.PassEnger.push(JSON.parse(pushObj));
					});
					this.PassEnger = JSON.parse(JSON.stringify(this.PassEnger))
					this.loading = false
				}else{

					this.loading = false
					this.hasPassEnger = false
				}
			}).catch(err=>{
				if(err.message.includes('timeout')){
					this.timeOut = true
					this.loading = false
				}
			})
		},
		toggle(index) {
			this.$refs.checkboxes[index].toggle();
		},
		selectFinish() {
			// 选择乘客弹窗关闭回调
			console.log(this.CheckPassEnger)
			let FullNumber = this.CheckPassEnger.filter(item=>{
				return item.ticket_type == '1'
			})
			let HalfNumber = this.CheckPassEnger.filter(item=>{
				return item.ticket_type == '2'
			})
			this.Card_Ids = this.CheckPassEnger.map(item=>{
				return item.id
			})
			this.FullNumber = FullNumber.length
			this.HalfNumber = HalfNumber.length
			console.log('全票人数' + this.FullNumber)
			console.log('半票人数' + this.HalfNumber)
			console.log('card_ids' + this.Card_Ids)
			this.$emit('addFinish')
		},
		showBar() {
			this.$emit('showBar')
		},
		addPassEnger() {
			//新增乘客
			this.$emit('toAddPassEnger')
		},
		deletePassEnger(){
			//删除乘客
			this.$router.push('/delPassEnger')
		},
		deleteTicketPassEnger(item){
			
      //删除购票乘客
			this.$emit('hideBar')
			this.$dialog.confirm({
			  message: '是否删除购票乘客'
			}).then(()=>{
        this.$emit('showBar')
				if(this.CheckPassEnger.length){
					  let index = this.CheckPassEnger.findIndex(el=>{
					     return el.id == item.id
					})
					this.CheckPassEnger.splice(index,1)
				  let FullNumber = this.CheckPassEnger.filter(item=>{
				  	return item.ticket_type == '1'
				  })
				  let HalfNumber = this.CheckPassEnger.filter(item=>{
				  	return item.ticket_type == '2'
				  })
				  this.FullNumber = FullNumber.length
				  this.HalfNumber = HalfNumber.length
					console.log(this.CheckPassEnger)
					console.log(this.FullNumber)
					console.log(this.HalfNumber)
					this.$emit('addFinish')
					this.Card_Ids = this.CheckPassEnger.map(item=>{
						return item.id
					})
				}
			}).catch(()=>{
				this.$emit('showBar')
			})
			
		}
		///////
	}
};
</script>

<style scoped>
.enger_item {
	padding: 0.35rem 0 0 0;
	height: 1rem;
	display: flex;
	align-items: center;
}
.delete {
	float: left;
	width: 0.5rem;
	height: 0.5rem;
	background-image: url(~@/assets/images/searchBus/del.png);
	background-size: 100%;
}
.enger_txt {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 1.05rem;
	float: left;
	margin-left: 0.25rem;
}
.enger_txt > div {
	font-size: 0.37rem;
}

.enger_txt .grey {
	color: #b2afb3;
	margin-right: 0.25rem;
}
.addPop {
	height: 7rem;
	overflow-y: hidden;
}
.addPop > div {
	height: 100%;
	position: relative;
}

.poptitle span {
	font-size: 0.58rem;
	vertical-align: -0.05rem;
}

.vantit {
	color: #4088ee;
}
.vanlab {
	font-size: 0.36rem;
}
.selectBox .van-icon {
	margin-top: 0.35rem;
	margin-right: 0.3rem;
}
.popwrap{
	position: relative;
	height: 100%;
}
.poptitle {
	z-index: 2;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	text-align: center;
	font-size: 0.36rem;
	color: #4088ee;
  height: 1rem;
	line-height: 1rem;
	background: #fff;
	z-index: 3;
}
.addPop .line {
	position: absolute;
	left:0;
	right: 0;
	top:1rem;
	height: 0.2rem;
	background: #f5f5f5;
	z-index: 2;
}

.selectBox {
	position: absolute;
	top:1.5rem;
	z-index: 1;
	left: .3rem;
	right: .3rem;
	bottom:0;
	overflow-y: auto;
}
.passengerLoad{
	text-align: center;
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 3;
	width: 100%;
}
.nopassEnger{
	width: 100%;
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 3;
}
.poptitle{
	display: flex;
	justify-content: center;
}
.poptitle > div{
	margin: 0 .5rem;
	display: flex;
	align-items: center;
}
.addPassenger span img{
	height: .5rem;
	margin-right: .1rem;
}
.deletePassenger span img{
	height: .45rem;
	margin-right: .1rem;
}
</style>
